import React from "react";
import styles from "@styles/personal.module.scss";
import { Helmet } from "react-helmet";
import { EditSOutline, RightOutline } from "antd-mobile-icons";
import { useRequestProfileQuery } from "@store/apiSlice/profileApiSlice";
import { Toast, Swiper } from "antd-mobile";
import { ToastHandler } from "antd-mobile/es/components/toast";
import { useEffect, useRef } from "react";
import useLoading from "@hooks/useLoading";
// import Image from "@shared/Image";
import classNames from "classnames";
import { SpinLoading } from "antd-mobile";
import Logout from "@pages/personal/widgets/logout";
import { useNavigate } from "react-router-dom";
export default function Personal() {
    // 发送请求获取登录用户个人资料
    const { data, isLoading, isSuccess } = useRequestProfileQuery(undefined);
    // 用于保存加载中提示的引用对象
    const toastHandler = useRef<ToastHandler>();
    // 监控是否正在获取用户个人资料
    useEffect(() => {
        // 如果正在获取
        if (isLoading) {
            // 弹出"加载中"的用户提示并保存其引用对象
            toastHandler.current = Toast.show({
                content: <SpinLoading />,
                duration: 0,
            });
        }
    }, [isLoading]);
    //  // 监控获取用户个人资料是否成功
    useEffect(() => {
        // 如果成功, 关闭"加载中"的用户提示
        if (isSuccess) toastHandler.current?.close();
        // 如果组件卸载
        return () => {
            // 关闭"加载中"的用户提示
            toastHandler.current?.close();
        };
    }, [isSuccess]);
    useLoading(isLoading, isSuccess);
    // 获取用于页面跳转的方法
    const navigate = useNavigate();

    return (
        <>
            {isSuccess && (
                <div className={styles.page}>
                    <Helmet>
                        <title>优医问诊-个人中心</title>
                    </Helmet>
                    <div className={styles.page}>
                        <div className={styles.summary}>
                            <div className={styles.user}>
                                <div className={styles.avatar}>
                                    {/* <img
                src="http://toutiao.itheima.net/images/user_head.jpg"
                alt="avatar"
              /> */}
                                </div>
                                <div className={styles.name}>
                                    <span>{data.data.account}</span>
                                    <EditSOutline />
                                </div>
                            </div>
                            <ul className={styles.statistics}>
                                <li>
                                    <span>{data.data.collectionNumber}</span>
                                    <span>收藏</span>
                                </li>
                                <li>
                                    <span>{data.data.likeNumber}</span>
                                    <span>关注</span>
                                </li>
                                <li>
                                    <span>{data.data.score}</span>
                                    <span>积分</span>
                                </li>
                                <li>
                                    <span>{data.data.couponNumber}</span>
                                    <span>优惠券</span>
                                </li>
                            </ul>
                        </div>
                        <div className={styles.inquiring}>
                            <h5>问诊中</h5>
                            <div className={styles.content}>
                                <div className={styles.item}>
                                    <div className={styles.avatar}>
                                        {/* <img
                  src="https://img0.baidu.com/it/u=2858914388,963166811&fm=253"
                  alt=""
                /> */}
                                    </div>
                                    <div className={styles.info}>
                                        <div className={styles.doctor}>
                                            <span>王医生</span>
                                            <i>内分泌科 | 主治医师</i>
                                        </div>
                                        <div className={styles.hospital}>
                                            <span>三甲</span>
                                            <i>积水潭医院</i>
                                        </div>
                                    </div>
                                    <div className={styles.consult}>进入咨询</div>
                                </div>
                                <div className={styles.indicator}>
                                    <span></span>
                                    <span className={styles.active}></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        <div className={styles.order}>
                            <div className={styles.top}>
                                <h5>药品订单</h5>
                                <a href="#">
                                    全部订单 <RightOutline />
                                </a>
                            </div>
                            <ul className={styles.list}>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                src={require("@icons/user/paid.svg").default}
                alt="待付款"
              /> */}
                                        {data.data.orderInfo.paidNumber > 0 && (
                                            <em>{data.data.orderInfo.paidNumber}</em>
                                        )}
                                    </div>
                                    <span>待付款</span>
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                src={require("@icons/user/shipped.svg").default}
                alt="待发货"
              /> */}
                                        {data.data.orderInfo.receivedNumber > 0 && (
                                            <em>{data.data.orderInfo.receivedNumber}</em>
                                        )}
                                    </div>
                                    <span>待发货</span>
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                src={require("@icons/user/received.svg").default}
                alt="待收货"
              /> */}
                                        {data.data.orderInfo.shippedNumber > 0 && (
                                            <em>{data.data.orderInfo.shippedNumber}</em>
                                        )}
                                    </div>
                                    <span>待收货</span>
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                src={require("@icons/user/finished.svg").default}
                alt="已完成"
              /> */}
                                        {data.data.orderInfo.finishedNumber > 0 && (
                                            <em>{data.data.orderInfo.finishedNumber}</em>
                                        )}
                                    </div>
                                    <span>已完成</span>
                                </li>
                            </ul>
                        </div>
                        <div className={styles.shortcuts}>
                            <h5 className={styles.title}>快捷工具</h5>
                            <ul className={styles.list}>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                  src={require("@icons/user/tool-01.svg").default }
                  alt="我的问诊"
                /> */}
                                    </div>
                                    <span>我的问诊</span>
                                    <RightOutline />
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                  src={require("@icons/user/tool-02.svg").default}
                  alt="我的处方"
                /> */}
                                    </div>
                                    <span>我的处方</span>
                                    <RightOutline />
                                </li>
                                <li>
                                    {/* <li onClick={() => navigate("/patient")}> */}
                                    <div className={styles.imgContainer}>
                                        {/* <img
                //   src={require("@icons/user/tool-03.svg").default}
                  alt="家庭档案"
                /> */}
                                    </div>
                                    <span>家庭档案</span>
                                    <RightOutline />
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                //   src={require("@icons/user/tool-04.svg").default}
                  alt="地址管理"
                /> */}
                                    </div>
                                    <span>地址管理</span>
                                    <RightOutline />
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                //   src={require("@icons/user/tool-05.svg").default}
                  alt="我的评价"
                /> */}
                                    </div>
                                    <span>我的评价</span>
                                    <RightOutline />
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                //   src={require("@icons/user/tool-06.svg").default}
                  alt="官方客服"
                /> */}
                                    </div>
                                    <span>官方客服</span>
                                    <RightOutline />
                                </li>
                                <li>
                                    <div className={styles.imgContainer}>
                                        {/* <img
                //   src={require("@icons/user/tool-07.svg").default}
                  alt="设置"
                /> */}
                                    </div>
                                    <span>设置</span>
                                    <RightOutline />
                                </li>
                            </ul>
                        </div>
                        <Logout />
                    </div>
                    {/* <Image url={data.data.avatar} alt="" /> */}
                    <ul className={styles.statistics}>
                    </ul>
                    <div className={styles.inquiring}>
                        <div className={styles.content}>
                            <Swiper
                                indicator={(total: number, current: number) => {
                                    // 创建用于存储指示器的数组
                                    const items: React.ReactElement[] = [];
                                    // 根据指示器数量生成指示器元素
                                    for (let i = 0; i < total; i++) {
                                        items.push(
                                            <span
                                                key={i}
                                                className={classNames({
                                                    [styles.active]: i === current,
                                                })}
                                            ></span>
                                        );
                                    }
                                    // 返回指示器
                                    return <div className={styles.indicator}>{items}</div>;
                                }}
                            >
                                {data.data.consultationInfo.map((item) => (
                                    <Swiper.Item key={item.orderId}>
                                        <div className={styles.item}>
                                            <div className={styles.avatar}>
                                                <img src={item.avatar} alt="" />
                                            </div>
                                            <div className={styles.info}>
                                                <div className={styles.doctor}>
                                                    <span>{item.name}</span>
                                                    <i>
                                                        {item.depName} | {item.positionalTitles}
                                                    </i>
                                                </div>
                                                <div className={styles.hospital}>
                                                    <span>{item.gradeName}</span>
                                                    <i>{item.hospitalName}</i>
                                                </div>
                                            </div>
                                            <div className={styles.consult}>进入咨询</div>
                                        </div>
                                    </Swiper.Item>
                                ))}
                            </Swiper>
                        </div>
                    </div>
                </div>
            )}
        </>

    );
}